import React, {useImperativeHandle, forwardRef, useState, useEffect} from 'react';
import {Input, Collapse, Row, Col } from "antd";
import TextArea from "antd/es/input/TextArea.js";
import style from "./propertiesPanel.module.scss"

const SequenceFlow = forwardRef((props, ref) => {


    const [element, setElement] = useState(null);
    const [moder, setModer] = useState(null);
    const [id,setId] = useState(null)
    const [name,setName]  = useState(null)
    const [isConditional,setIsConditional] = useState(false)
    const [condition,setCondition] = useState(null)



    useEffect(() => {
        setInputData()
    },[element])


    useImperativeHandle(ref, () => ({
        callback
    }));
    const callback = (newElement,moder) => {
        setElement(newElement)
        setModer(moder);
    }

    const changeName = (e) => {
        setName(e.target.value)
        changeProp({name:e.target.value})
    }

    const changeProp = (data) => {
        const modeling = moder.get('modeling')
        modeling.updateProperties(element,data)
    }


    const changeCondition = (e) => {
        const moddle = moder.get('moddle');
       let condition = '${' + e.target.value + '}'
      const expression =  moddle.create('bpmn:FormalExpression',{
           body:condition
       })
        changeProp({conditionExpression:expression})
    }


    const setInputData = () => {
        if(element){
            setId(element.id)
            let conditionExpression = element.businessObject.conditionExpression;
            if(conditionExpression) {
                let body =  conditionExpression.body;
                const match = body.match(/\$\{(.*)\}/);
                let condition = match ? match[1] : null;
                setCondition(condition)

            }
            let businessObject = element.businessObject;
            if(businessObject) {
                setName(businessObject.name ? businessObject.name : '')
            }
            setIsConditional(element.source.type  === "bpmn:ExclusiveGateway")
        }
    }


    return (
        <div className={props.type && props.type === 'bpmn:SequenceFlow' ? style.show : style.hide}>
            <Collapse  items={
                [
                    {
                        key: 1,
                        label: "常规",
                        children: (
                            <div>
                                <Row justify={"center"} align={"middle"}>
                                    <Col span={6}>ID:</Col>
                                    <Col span={18}>
                                        <Input value={id} />
                                    </Col>
                                </Row>
                                <Row style={{ marginTop: 10 }} justify={"center"} align={"middle"}>
                                    <Col span={6}>名称:</Col>
                                    <Col span={18}>
                                        <Input value={name} onChange={(e) => changeName(e)}  />
                                    </Col>
                                </Row>
                            </div>
                        )
                    },
                    // 根据条件决定是否添加流转配置面板
                    ...(isConditional ? [
                        {
                            key: '2',
                            label: "流转配置",
                            children: (
                                <div>
                                    <Row style={{ marginTop: 10 }} justify={"center"} align={"middle"}>
                                        <Col span={6}>表达式:</Col>
                                        <Col span={1}>&#36;&#123;</Col>
                                        <Col span={16}>
                                            <Input  value={condition}  onChange={(e) => changeCondition(e)}  />
                                        </Col>
                                        <Col span={1}>&#125;</Col>
                                    </Row>
                                </div>
                            )
                        }
                    ] : []),
                    {
                        key: 3,
                        label: "描述文档",
                        children: (
                            <div>
                                <Row style={{ marginTop: 10 }} justify={"center"} align={"middle"}>
                                    <Col span={6}>文档:</Col>
                                    <Col span={18}>
                                        <TextArea size={"middle"} placeholder="文档" />
                                    </Col>
                                </Row>
                            </div>
                        )
                    }
                ]
            } ghost={true} defaultActiveKey={1} />
        </div>
    );

})

export default SequenceFlow;

